<template>
  <div class="article-container">
<!-- 筛选表单容器 -->
<!-- 1.建两个el-card卡片标签,参照文档添加卡片头部模块 -->
<el-card>
  <!-- 头部 -->
  <template #header>
    <!-- 2.文档Breadcrumb 面包屑->图标分隔符 代码复制 -->
    <!--   留下需要的标签 调整顺序 更改内容 -->
   <el-breadcrumb separator-class="el-icon-arrow-right">
     <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
     <el-breadcrumb-item>内容管理</el-breadcrumb-item>
   </el-breadcrumb>
  </template>
  <!-- 表单内容 -->
  <el-form ref="form" :model="queryForm" label-width="80px">
  <el-form-item label="状态">
    <!-- queryForm.status -->
    <el-radio-group v-model="queryForm.status">
      <el-radio :label="obj.id" v-for="obj,idx in statusList" :key="idx">{{obj.name}}</el-radio>
    </el-radio-group>
  </el-form-item>
  <el-form-item label="频道">
    <!-- queryForm.channel_id -->
    <el-select v-model="queryForm.channel_id" placeholder="请选择频道">
      <!-- 此处多添加一个全部选项 -->
      <!-- 两种方法:直接添加标签,或在后台返回数组中添加一个对象 -->
      <!-- <el-option label="全部" :value="null"></el-option> -->
      <el-option v-for="obj in allChannelList" :key="obj.id" :label="obj.name" :value="obj.id"></el-option>
    </el-select>
  </el-form-item>
  <el-form-item label="日期">
    <!-- 1.查文档->date-picker可以绑定change事件,监听日期的变化 -->
    <el-date-picker
      v-model="value1"
      type="daterange"
      range-separator="至"
      start-placeholder="开始日期"
      end-placeholder="结束日期"
      @change="onDatePickerChangeFn">
    </el-date-picker>
  </el-form-item>
  <el-form-item>
    <!-- 1.给按钮添加点击事件 -->
    <el-button type="primary" @click="queryFn">筛选</el-button>
  </el-form-item>
</el-form>
</el-card>

<!-- 表格数据容器 -->
<el-card>
  <!-- 1.头部 -->
  <template #header>
<h3 class="title">根据筛选条件共查询到{{totalCount}}条结果</h3>
  </template>
<!-- 2.表格 复制文档表格代码
         label:表格每项标题
         data:渲染的数组(格式是数组包对象)
         style:指定表格的样式 -->
   <el-table
      :data="articleList"
      style="width: 100%">
      <!-- prop:需要渲染的数据字段,需要跟对象中指定的属性(键)保持一致 -->
      <el-table-column
        label="封面"
        width="180">
        <!-- 作用域插槽
              新写法: <template v-slot="变量名"></template>
              旧写法: <template scope-slot="变量名"></template>
         -->
        <!-- 1.插槽传自定义数据 -->
        <template v-slot="KD">
          <!-- 2.插入图片标签
          2.1src地址由v-slot的变量名.row 得到
          2.2设置图片宽度100%
          2.3如果有图显示图片,如果没有显示'无图'
          2.4去掉el-table-column的prop属性 ->prop="cover" -->
          <img
          width="100%"
          v-if="KD.row.cover.images.length>0"
          :src="KD.row.cover.images[0]"
          alt="cover">
          <span v-else>无图</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="title"
        label="标题"
        width="180">
      </el-table-column>
      <!-- 1.去掉 prop="status" 属性
           2.添加template插槽 默认插槽起一个变量名-->
      <el-table-column
        label="状态">
        <template #default="KD">
          <!-- 4.复制文档->Tag标签代码,更改内容:
                 5.通过KD.row获取状态数组的下标,定义一个函数 获取到ARTICLE_STATUS_LIST的name 和 type值 -->
          <el-tag :type="getArticleStatus(KD.row.status).type">{{getArticleStatus(KD.row.status).name}}</el-tag>
        </template>
      </el-table-column>
            <el-table-column
        prop="read_count"
        label="阅读数">
      </el-table-column>
      <el-table-column
        prop="comment_count"
        label="评论数">
      </el-table-column>
      <el-table-column
        prop="like_count"
        label="点赞数">
      </el-table-column>
      <el-table-column
        prop="pubdate"
        label="发布时间" width="240px">
      </el-table-column>
      <el-table-column
        label="操作" width="240px">
        <!-- 2.给删除按钮添加点击事件 -->
        <!-- 4.给操作模块的作用域插槽加v-slot,起名字,点击事件实参拿数据(插槽名.row就是articleList的相应对象) -->
        <template #default="KD">
          <!-- 1.给编辑按钮添加点击事件 跳转到发布文章页 带上数组对象的id -->
            <el-button @click="$router.push(`/layout/publish?targetId=${KD.row.id}`)" type="primary" icon="el-icon-edit" circle plain></el-button>
            <el-button @click="delFn(KD.row)" type="danger" icon="el-icon-delete" circle plain></el-button>
        </template>
      </el-table-column>
    </el-table>
    <!--1.根据后台返回数据更改参数的值
         current-page:当前页数
         page-size:每页显示个数选择器的选项设置
         total:总页数
         page-sizes:每页显示个数选择器的选项设置
         size-change: pageSize 改变时会触发 -->
    <el-pagination
      background
      @size-change="handleSizeChangeFn"
      @current-change="handleCurrentChangeFn"
      :current-page="queryForm.page"
      :page-sizes="[2, 3, 5, 10]"
      :page-size="queryForm.per_page"
      layout=" prev,pager,next, sizes,  jumper"
      :total="totalCount">
    </el-pagination>
</el-card>
  </div>
</template>getArticleListAPI

<script>
import { getAllChannelListAPI, getArticleListAPI, delArticleListAPI } from '@/api/Article'
import { ARTICLE_STATUS_LIST } from '@/constant'
export default {
  name: 'Article',
  data () {
    return {

      allChannelList: [],
      statusList: ARTICLE_STATUS_LIST,
      value1: '',
      queryForm: {
        status: null, // 不传为全部
        channel_id: null, // 不传为全部
        begin_pubdate: null, // 起始时间
        end_pubdate: null, // 截止时间
        page: 1, // 页码,默认1
        per_page: 10 // 每页数量 默认10
      },
      articleList: [], // 3.创建文章列表数组接收数据,关联表格data属性
      totalCount: 0 // 2.声明文章列表总条数的变量
      // currentPage1: 5,
      // currentPage2: 5,
      // currentPage3: 5,
      // currentPage4: 4
    }
  },
  async created () {
    // 获取频道列表
    const resp = await getAllChannelListAPI()
    // 后台返回数据中没有全部频道,用数组方法自己添加进去(也可以直接写el-option标签添加,两种方法皆可)
    resp.data.data.channels.unshift({
      id: null,
      name: '全部'
    })
    this.allChannelList = resp.data.data.channels
    // 2.获取默认(全部)的文章列表(由于需要复用,所以在methods中封装一个函 数)
    this.getArticleList()
  },
  methods: {
    // 3.删除文章
    async delFn (obj) {
      // console.log(obj)
      // 做一个确认
      try {
        await this.$confirm('确定删除么', '客官', {
          type: 'warning'
        })

        await delArticleListAPI({
          artId: obj.id
        })
        this.$message({
          type: 'success',
          message: '删除成功'
        })
        // 重新渲染表格
        this.getArticleList()
      } catch (err) {
        this.$message({
          type: 'info',
          message: '已取消'
        })
      }
    },
    // pageSize 改变时触发的函数
    handleSizeChangeFn (val) {
      // val是每页显示的条数
      this.queryForm.per_page = val
      this.getArticleList()
    },
    // 改变当前页数时触发的函数
    handleCurrentChangeFn (val) {
      // val是当前页数
      this.queryForm.page = val
      this.getArticleList()
    },
    // 5.根据状态的id值查找状态对象
    getArticleStatus (status) {
      // findIndex版本
      // const index = ARTICLE_STATUS_LIST.findIndex((obj) => obj.id === status)
      // if (index !== -1) {
      //   return ARTICLE_STATUS_LIST[index]
      // }

      // find版本
      const el = ARTICLE_STATUS_LIST.find((obj) => obj.id === status)
      if (el !== undefined) {
        return el
      }
    },
    // 2.1获取文章列表的函数
    async getArticleList () {
      const resp = await getArticleListAPI(this.queryForm)
      // console.log(resp)
      // this.articleList = resp.data.data.results
      // 3.后台返回数据赋值给列表总条数
      // this.totalCount = resp.data.data.total_count

      // 解构赋值写法:
      const { results, total_count } = resp.data.data
      this.articleList = results
      this.totalCount = total_count
      // 如果当前显示不是第一页,还没有数据,应该让page前进一页,获取上一页的数据
      if (this.queryForm.page > 1 && !results.length) {
        this.queryForm.page--
        this.getArticleList()
      }
    },
    // 2.点击筛选按钮
    queryFn () {
      this.getArticleList()
    },
    onDatePickerChangeFn (value) {
      [this.queryForm.begin_pubdate, this.queryForm.end_pubdate] = value
    },
    handleSizeChange (val) {
      console.log(`每页 ${val} 条`)
    },
    handleCurrentChange (val) {
      console.log(`当前页: ${val}`)
    }
  }

}
</script>
<style scoped>
/* 3.给分页加一个样式 */
.el-pagination {
  margin-top: 20px;
}
.title{
font-size: 18px;
font-weight: normal;
}
</style>
